<template>
  <div>
    <DynamicTable row-key="id" header-title="事件类型" title-tooltip="绑定处置单位，绑定后分派就能找寻到单位办理的人员"
                  :data-request="Api.eventListServe.getEventHandlerList" :columns="columns" bordered size="small">
      <template #toolbar>
        <a-button type="primary" @click="addEventList({})"> 新增</a-button>
        <ImportModal @flushTable="flushTable"></ImportModal>
      </template>
    </DynamicTable>
    <a-modal width="100%" wrap-class-name="full-modal" :footer="null" v-model:open="showModal2" title="绑定处置单位"
             @ok="handleOk" @cancel="handleCancel">
      <AndingModal v-if="showModal2" :datas="thisRecord"/>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import {ref, defineOptions} from "vue";

import {roleSchemas} from "@/views/system/dept/formSchemas";
import {baseColumns, type TableListItem, type TableColumnItem,} from "./columns";

import AndingModal from './bandingModal.vue'
import ImportModal from "./importModal.vue";

import {useFormModal} from '@/hooks/useModal/';
import {useTable} from "@/components/core/dynamic-table";

import {getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance()

import Api from "@/api/";

defineOptions({
  name: "shijianliebiao",
});
const [DynamicTable, dynamicTableInstance] = useTable();
const [showModal] = useFormModal();

const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: "操作",
    width: 130,
    dataIndex: "ACTION",
    hideInSearch: true,
    fixed: "right",
    actions: ({record}) => {
      let action = [
        // {
        //   label: "绑定处置单位",
        //   auth: {
        //     perm: 'dealevent:shijianleixing:shanchu',
        //     effect: 'disable',
        //   },
        //   onClick: () => {
        //     openMenuModal(record)
        //   },
        // },
        {
          label: "删除",
          auth: {
            perm: 'dealevent:shijianleixing:bangding',
            effect: 'disable',
          },
          onClick: () => {
            Api.eventListServe.deleteTbEventList(record).then(res => {
              dynamicTableInstance?.reload();
            })
          },
        },
      ];
      if (proxy.$isMobile) {
        // 删除掉数组最后一个
        action.pop();
      }
      return action
    },
  },
];

const addEventList = async (record: Partial<TableListItem>) => {
  const [formRef] = await showModal({
    modalProps: {
      title: `新增`,
      width: '50%',
      onFinish: async (values) => {
        console.log(values)
        let addTbEventList = await Api.eventListServe.addTbEventList(values);
        console.log(addTbEventList)
        dynamicTableInstance?.reload();
      },
    },
    formProps: {
      labelWidth: 100,
      schemas: roleSchemas,
    },
  });
  formRef?.setFieldsValue({
    ...record
  },);
}

const thisRecord = ref<TableListItem>();
const showModal2 = ref<boolean>(false);
const openMenuModal = async (record: TableListItem) => {
  thisRecord.value = record;
  showModal2.value = true
}

const flushTable = () => {
  setTimeout(() => {
    dynamicTableInstance?.reload();
  }, 1000);
}

const handleOk = () => {

}

const handleCancel = () => {
}

</script>
<style lang="less">
.full-modal {
  .ant-modal {
    height: calc(100vh);
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    //height: calc(100vh);

    .ant-modal-body {
      overflow: auto;
    }
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>